<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.time-axis{
				max-width: 300px;
				padding: 10px;
			}
			.item {
				border-left: 1px dashed #ddd;
				padding-left: 10px;
				position: relative;
			}
			.item:last-child{
				/* border-left: 0px; */
			}

			.icon {
				width: 8px;
				height: 8px;
				border: 1.5px solid #4E6EF2;
				border-radius: 50%;
				box-sizing: border-box;
				position: absolute;
				left: -4.5px;
				background-color: #fff;
				top: 2px;
			}

			.item .time {
				color: #9195A3;
				line-height: 14px;
				font-size: 12px;
				font-weight: 400;
			}

			.item .content {
				max-width: 100%;
				font-size: 14px;
				line-height: 18px;
				overflow: hidden;
				padding: 10px 0 10px 0;
				color: #000;
			}
			
			/* 伪类 */
			.item .content::selection{
				background-color: yellow;
				color: blue;
				font-weight: bolder;
			}
			li::marker {
			  color: blue;
			  font-weight: bold;
			}
			
			li::before{
				content: "\2610";
				
				 margin-right: 8px; /* 与文本之间保持一定距离 */
			}
			input[type=text]::placeholder{
				font-size: 12px;
				color: #ccc;
				font-style: italic;
				text-indent: 10px;
			}
			p::grammar-error{
				text-decoration: line-through;
				  color: red;

			}
		</style>
	</head>
	<body>
		<div class="time-axis">
			<input type="text" placeholder="请输入姓名"/>
			<p>::grammar-error <br/>  和 ::spelling-error 伪元素允许您分别对标记为语法或拼写错误的文本部分设置样式。当内容中存在错误时，这些伪元素可用于向用户提供视觉提示。 </p>
			<div class="item">
				<div class="icon"></div>
				<div class="time">
					昨天 17:46
				</div>
				<div class="content">
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
				</div>
			</div>
			<div class="item">
				<div class="icon"></div>
				<div class="time">
					昨天 17:46
				</div>
				<div class="content">
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
				</div>
			</div>
			<div class="item">
				<div class="icon"></div>
				<div class="time">
					昨天 17:46
				</div>
				<div class="content">
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
				</div>
			</div>
			<div class="item">
				<div class="icon"></div>
				<div class="time">
					昨天 17:46
				</div>
				<div class="content">
					总台记者观察丨朝韩对峙陡然升级 紧张局势恐将持续
				</div>
			</div>
		</div>
		
		<ul>
			<li>你哈是的</li>
			<li>花洒对光反射</li>
			<li>李丽丽</li>
			<li>你婚姻</li>
			<li>额炒的菜</li>
		</ul>
	</body>
</html>